<script setup lang="ts">
import { onBeforeMount, onDeactivated, ref, inject, computed } from "vue";
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";
import { EnumViewMode } from "@renderer/assets/types";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const tips = "view setting";
const showTip = ref(false);
const {
  activeViewRef: activeView
} = getActiveTabViewOp()

const layoutOptions = computed(() => {
  if (activeView.value.viewMode === EnumViewMode.quick) {
    return systemStore.quickLayoutOptions;
  } else {
    return systemStore.mprLayoutOptions;
  }
});

const showFreedomChoose = computed(() => {
  return activeView.value.viewMode === EnumViewMode.quick
});

onBeforeMount(() => {
  showTip.value = false;
});
onDeactivated(() => {
  showTip.value = false;
});
const systemStore = useSystemSettingStore();

const showIcon = ref(
  activeView.value.viewMode === EnumViewMode.quick
    ? systemStore.quickLayout.icon
    : systemStore.mprLayout.icon,
);

const selection = Array(36).map((_, i) => i);
const selectedRange = ref<number[]>([]);
const activeIndex = ref(-1);

const handleMouseenter = (index) => {
  activeIndex.value = index;
  const row_index = index % 6;
  const col_index = index / 6;
  let arr: number[] = [];
  for (let i = 0; i <= col_index; i++) {
    for (let j = 0; j <= row_index; j++) {
      arr.push(i * 6 + j);
    }
  }
  selectedRange.value = arr;
};

const activeSelect = computed(() => {
  if (activeIndex.value === -1) {
    return `0*0`;
  }
  return  `${Math.floor(activeIndex.value / 6) + 1}*${(activeIndex.value % 6) + 1}`;
});

const selectLayout = () => {
  const systemStore = useSystemSettingStore();
  showIcon.value = "quickLayoutIconMulti";
  systemStore.setQuickLayout("quick-e", activeSelect.value);
};

const chooseLayout = (item) => {
  const systemStore = useSystemSettingStore();
  showIcon.value = item.icon;
  if (activeView.value.viewMode === EnumViewMode.quick) {
    systemStore.setQuickLayout(item.key, item.value);
  } else {
    systemStore.updateImgRenderSetting("mprLayout", item.key);
  }
};
</script>

<template>
  <v-menu location="top">
    <template v-slot:activator="{ props: menuProps }">
      <v-btn-group class="!h-[35px]">
        <v-tooltip
          :text="tips"
          location="bottom"
          v-bind="menuProps"
          v-model="showTip"
        >
          <template v-slot:activator="{ props }">
            <v-btn-group class="!h-[35px]">
              <v-btn
                class="!w-[55px] !min-w-[35px]"
                :ripple="false"
                v-bind="{...props, ...menuProps }"
              >
                <base-icon :name="showIcon" />
                <v-icon icon="mdi-arrow-down-thin"></v-icon>
              </v-btn>
            </v-btn-group>
          </template>
        </v-tooltip>
      </v-btn-group>
    </template>

    <v-card class="!mt-[10px]">
      <v-list class="grid grid-cols-3 gap-3">
        <v-list-item
          @click="chooseLayout(item)"
          :active="showIcon === item.icon"
          v-for="(item, index) in layoutOptions"
          :key="index"
          :value="index"
        >
          <base-icon :size="30" :name="item.icon"></base-icon>
        </v-list-item>
      </v-list>

      <template v-if="showFreedomChoose">
        <v-divider />
        <div
          class="w-[200px] h-[200px] grid grid-cols-6 grid-rows-6 gap-1 !p-[10px]"
          @click="selectLayout"
        >
          <div
            class="border-2 flex justify-center items-center"
            :class="selectedRange.includes(index) ? '!bg-gray-300' : 'bg-gray'"
            @mouseenter="handleMouseenter(index)"

            v-for="(_, index) in selection"
          >
            <span class="text-[10px] font-black" v-if="activeIndex === index">
              {{ activeSelect }}
            </span>
          </div>
        </div>
      </template>
    </v-card>
  </v-menu>
</template>

<style scoped></style>
